import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    Dimensions,
    ScrollView, StatusBar,Linking
} from 'react-native';
import { WebView } from 'react-native-webview';
// 取得屏幕的宽高Dimensions
import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";
import Football from "../../utils/Football";
import Utils from "../../utils/Utils";
const { width, height } = Dimensions.get('window')


export default class AliPay extends Component {
    constructor(props) {
        super(props);
        this.state = {
            form: null,
        };
    }
    static navigationOptions = {
        title: '支付宝支付',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#d0162e',
            paddingTop: 18
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            //fontWeight: 'bold',
        },
    }
    componentDidMount() {
        const { navigation } = this.props;
        var form = navigation.getParam("form");
        this.setState({
            form: form
        });
    }

    renderLoadingView() {
        return (
            <View style={styles.container}>
                <Text>Loading movies...</Text>
            </View>
        );
    }
    onShouldStartLoadWithRequest(event){
        let reqUrl =event.url;     
        if(reqUrl.indexOf("alipay://")>-1 || reqUrl.indexOf("alipays://")>-1) {
            //let  strUrl = reqUrl.replace("alipays", "XXX");
            Linking.openURL(reqUrl);
            return false; //这一行是新加入了，必须加，如果不加，就返回不了app
        }
        return true;
    }
    render() {
        let { form } = this.state;
        if (form == null) {
            return this.renderLoadingView();
        }
        var html = "<html><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width,initial-scale=1,user-scalable=0'>" +
            "<style type='text/css'> body{padding-left:16;padding-right:16; margin:0;} img{width:100%}</style></head>" +
            "<body style='height:200px;'><div>" + Utils.htmlDecodeByRegExp(form) + "</div></body></html>";

        return (
            <View style={styles.container}>
                <StatusBar translucent={true} backgroundColor="transparent" />
                <ScrollView style={{ width: width, height: height }}>
                    <WebView
                        originWhitelist={['*']}
                        onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}
                        source={{ html: Utils.htmlDecodeByRegExp(form) }}
                        style={{ width: width, height: height, backgroundColor: '#ffffff', flex: 1, marginTop: -50 }}
                    />
                </ScrollView>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#fff',
    },
});